<template>
	<view class="wrap">
		<view class="wrap__title">
			<uni-icons type="left" size="24" color="#fff" @click="backClick"></uni-icons>
			<text class="header__title">{{$t('momey.records')}}</text>
			<image src="@/static/icons/cash_history.png" mode="widthFix" class="header__icon" style="opacity: 0;"></image>
		</view>
		<view class="wrap__header">
			<view class="header__item">{{$t('cash.order')}} </view>
			<view class="header__item">{{$t('cash.type')}}</view>
			<view class="header__item">{{$t('cash.totals')}}</view>
			<view class="header__item">{{$t('cash.date')}}</view>
		</view>
<view class="wrap__scroll">
			<view class="scroll__list">
				<view class="list__item" v-for="(item, index) in recordsList" :key="index">
					<view class="item__name">
						<image :src="item.marke_id | formatIcon" mode="widthFix" 
						class="info__icon"></image>
						<text class="info__code">{{item.id}}</text>
					</view>
					
					<!-- <view class="item__name">{{item.marke_id}}</view> -->
					<view class="item__type">{{item.memo}}</view>
					<view class="item__price">
						{{item.money}}
					</view>
					<view class="item__time">{{item.createtime}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				pageIndex:0,
				recordsList:[]
			}
		},
		onLoad() {
			
			this.getFundRecords()
		},
		filters:{
			formatVol(num){
				let totals = Number(num)
				if(totals>=1000){
					return (totals / 1000).toFixed(2) + "K"
				}
				return totals || 0
			},
			
			// 处理图片格式
			formatIcon(name){
				let obj = {
					1:"KRW",
					2:"US",
					3:"UK"
				}
				return `/static/icons/${obj[name]}.png`
			}
		},
		methods:{
			backClick(){
				
				uni.switchTab({
						url: '/pages/trade/trade',
				})
			},
			async getFundRecords(){
				let res = await this.$api.getFundRecords()
				if(res.code === 1 && res.data){
					this.recordsList = res.data.data
				}
			}
		}
	}
</script>

<style lang="scss">
	.wrap{
		&__title{
			height: 128rpx;
			// background: #161827;
			@include flexRowAlign(space-between);
			padding: 0 30rpx;
			box-sizing: border-box;
			.header__title{
				flex: 1;
				font-size: 46rpx;
				font-weight: 800;
				color: #fff;
				text-align: center;
			}
			.header__icon{
				width: 42rpx;
				height: 42rpx;
			}
		}
		.wrap__header{
			@include flexRowAlign(space-between);
			height: 64rpx;
			margin-top: 20rpx;
			.header__item{
				@include flexRowAlign(center);
				color: #999999;
				font-size: 24rpx;
				&:not(:nth-child(3)){
					flex: 1;
				}
				&:nth-child(3){
					width: 280rpx;
				}
			}
		}
		&__scroll{
			padding: 0 30rpx;
			box-sizing: border-box;
			.scroll__list{
				.list__item{
					@include flexRowAlign(space-between);
					height: 120rpx;
					// border-top: 1rpx solid #CCCCCC;
					.item__name{
						flex: 1;
						font-size: 26rpx;
						color: #fff;
						.info__code{
							margin-left: 2px;
						}
						.info__icon{
							width: 30rpx;
							height: 30rpx;
					
							border-radius: 50%;
						}
					}
					.item__type{
						text-align: center;
						flex: 1;
						font-size: 24rpx;
						font-weight: 800;
						color: #fff;
					}
					.item__price{
						text-align: center;
						width: 280rpx;
						font-size: 28rpx;
						font-weight: 800;
						color: #FF3B46;
					}
					.item__time{
						flex: 1;
						flex-shrink: 0;
						font-size: 24rpx;
						color: #fff;
						text-align: right;
					}
				}
			}
		}
	}
</style>